<template>
  <div>
    <!--
    el-table 表明这是个table表格
    :data 它是这个表格要展示的数据
    style="width: 100%" 设置表格的宽度
    stripe  带斑马纹的表格
    border 带边框的表格
    -->
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="系统属性-键">
        <el-input v-model="query.keyword" placeholder="属性名字-键"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getconfigs">查询</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="batchDelete"  size="medium">批量删除</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="add"  size="medium">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="pageInfo.rows"
        stripe
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <!--el-table-column 这是表示表格的列
      prop 就是你这一列要展示的数据的属性名
      label 该列的表头标题
      width  该列所占的宽度-->
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="key"
          label="键">
      </el-table-column>
      <el-table-column
          prop="value"
          label="值">
      </el-table-column>
      <el-table-column
          prop="type"
          label="类型"
          width="200">
      </el-table-column>
      <el-table-column
          prop="intro"
          label="介绍"
          width="200">
      </el-table-column>
      <el-table-column label="操作">
        <!--slot-scope="scope"只对当前它所在的模板有效-->
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--新增/修改的弹出框   :visible.sync 用来控制弹出框是关闭还是打开的  true 打开  false 关闭 -->
    <el-dialog title="新增/修改" :visible.sync="dialogFormVisible" v-loading="loading">
      <el-form :model="config"  :rules="configFormRules" ref="config">
        <el-form-item label="系统属性-键" prop="key">
          <el-input v-model="config.key" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="系统属性-值" label-width="200">
          <el-input v-model="config.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="系统属性-类型" label-width="200">
          <el-input v-model="config.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="系统属性-值" label-width="200">
          <el-input v-model="config.intro" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
    </el-pagination>

  </div>

</template>

<script>
export default {
  data() {
    return {
      config: {
        'id': null,
        'key': "",
        'value': "",
        'type': "",
        'intro': ""
      },
        pageInfo: {
          rows: [],
          total: null
        },
        query: {
          currentPage: 1,//起始页
          pageSize: 10,//当前页条数
          keyword: ""
        },
        selectValue: [],
        dialogFormVisible: false,
        loading: false,
        configFormRules: {
          key: [
            {required: true, message: '请输入属性-键', trigger: 'blur'}
          ],
          value: [
            {required: true, message: '请输入属性-值', trigger: 'blur'}
          ]
        }
      }
    },
  methods: {
    save: function () {
      this.$http.put("/config",this.config)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.showMessage("成功", "保存成功")
              this.loading = false;
              this.query.currentPage = 1;
              this.getconfigs();
              this.dialogFormVisible = false;
            } else {
              this.showMessage("失败", "保存失败")
            }
          }).catch(result => {
        this.showMessage("取消", "取消保存")
      })
    },
    add() {
      this.config = {
        'id': null,
        'key': "",
        'value': "",
        'type': "",
        'intro': ""
      },
          this.dialogFormVisible = true
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.config = Object.assign({}, row);
      if (this.config.manager == null) {
        this.config.manager = {id: null}
      }
      if (row.path != null) {
        let arrays = row.path.split("/");
        let ids = [];
        for (let i = 1; i < arrays.length - 1; i++) {
          ids.push(parseInt(arrays[i]))
        }
        this.config.parent = ids;
      }
      this.getconfigs();
    },
    batchDelete() {
      //获取选取的id
      let ids = this.selectValue.map(config=>config.id)
      console.log(ids)
      if(ids.length<1){//判断用户是否勾选了数据,没有则return
        this.showMessage("成功","请选择数据")
        return
      }
      this.$confirm('此操作将永久删除数据, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$http.patch("/config",ids)
            .then(result=>{
              result=result.data
              if (result.success){
                this.showMessage("成功","删除成功")
                this.query.currentPage=1
                this.getconfigs()
              }else {
                this.showMessage("失败","删除失败")
              }
            })
      }).catch(()=>{
        this.showMessage("取消","取消删除")
      })
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.currentPage = 1;
      this.getconfigs()
    },
    handleCurrentChange(val) {//当前页
      this.query.currentPage = val
      this.getconfigs()
    },
    handleDelete(index, row) {
      console.log(index, row)
      let id = row.id
      this.$confirm('此操作将永久删除数据, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("/config/" + row.id)
            .then(result => {
              result = result.data
              if (result.success) {
                this.showMessage("成功", "删除成功")
                this.query.currentPage = 1
                this.getconfigs()
              } else {
                this.showMessage("失败", "删除失败")
              }
            })
      }).catch(() => {
        this.showMessage("取消", "取消删除")
      })
    },
    showMessage(type, message) {
      if (type == "成功") {
        this.$message({
          type: "success",
          message: message
        })
      }
      if (type == "失败") {
        this.$message({
          type: "error",
          message: message
        })
      }
      if (type == "取消") {
        this.$message({
          type: "info",
          message: message
        })
      }
    },
    handleSelectionChange(rows) {
      console.log(rows)
      this.selectValue = rows//获取指定行id的数据上
    },
    getconfigs() {//获取用户数据
      this.$http.post("/config", this.query)
          .then(result => {
            this.pageInfo = result.data.result
            console.log(this.pageInfo)
          })
    }
  },
    mounted() {
      this.getconfigs()//回显

        }

  }
</script>
